"use strict";

layui.use(["okUtils", "table", "okCountUp", "okMock"], function () {
    var countUp = layui.okCountUp;
    var table = layui.table;
    var okUtils = layui.okUtils;
    var okMock = layui.okMock;
    var $ = layui.jquery;
    okLoading.close();
    /**
     * 收入、商品、博客、用户
     */
    function statText() {
        var elem_nums = $(".stat-text");
        elem_nums.each(function (i, j) {
            !new countUp({
                target: j,
                endVal: parseInt($(j).text())
            }).start();
        });
    }

    /**
     * 所有用户
     */
    function userList() {
        table.render({
            method: "get",
            url: $('#statement').data('visited'),
            elem: '#visited',
            page: true,
            limit: 6,
            cols: [[
                {field: "id", title: "ID", width: 80},
                {field: "session", title: "SESSID", width: 120},
                {field: "browser", title: "客户端", width: 80},
                {field: "ip", title: "IP", width: 100},
                {field: "visited", title: "浏览次数", width: 80},
                {field: "username", title: "用户", width: 80},
                {field: "update_time", title: "创建时间", width: 180},
                {field: "create_time", title: "创建时间", width: 180},
            ]],
        });
    }

    /**
     * 浏览器统计
     */
    function browser(){
        $.ajax({
            url : $('#statement').data('browser'),
            data: {},
            type: 'GET',
            success: function(d){
                if (d.code === 0){
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init($('#browser')[0]);
                    // 指定图表的配置项和数据
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: d.data.keys
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: d.data.data
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                } else{
                    //请求失败
                    console.log(d.msg);
                }
            }
        });


    }

    /**
     * 访问量
     */
    function pageview(){
        $.ajax({
            url:$('#statement').data('pageview'),
            date:{},
            type: 'GET',
            success : function(d){
                if (d.code === 0){
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init($('#pageview')[0]);

                    // 指定图表的配置项和数据
                    let option = {
                        tooltip: {},
                        legend: {
                            data: ['访问量']
                        },
                        xAxis: {
                            data: d.data.keys
                        },
                        yAxis: {},
                        series: [{
                            name: 'PV',
                            type: 'bar',
                            data: d.data.sum
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                } else{
                    console.log(d.msg);
                }
            }
        });

    }

    /**
     * 用户位置
     */
    function userLocation() {
        let chinaChartOption = {
            // "title": {"text": "用户所在地统计", "subtext": "", "x": "center"},
            "tooltip": {"trigger": "item"},
            "visualMap": {
                "show": true,
                "min": 0,
                "max": 1,
                "left": 10,
                "top": "center",
                "orient": "vertical",
                "text": ["高", "低"],
                "realtime": false,
                "calculable": true,
                "inRange": {"color": ["#E0FFFF", "#BEEFEC", "#6cd2d2", "#6CC8C1",]}
            },
            "series": [
                {
                    "name": "用户所在地统计",
                    "roam": true,
                    "type": "map",
                    "mapType": "china",
                    "data": [],
                    "itemStyle": {
                        "normal": {"areaColor": "#eeeeee", "borderColor": "#aaaaaa", "borderWidth": 0.5},
                        "emphasis": {"areaColor": "rgba(63,177,227,0.25)", "borderColor": "#3fb1e3", "borderWidth": 1}
                    },
                    "label": {"normal": {"textStyle": {"color": "#000"}}, "emphasis": {"textStyle": {"color": "#000"}}}
                }
            ]
        };
        $.ajax({
            url : $('#statement').data('location'),
            data: {},
            type: 'GET',
            success: function(d){
                if (d.code === 0){

                    // 获取最大值
                    let max = 1,
                        data = d.data;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].value > max) {
                            max = data[i].value;
                        }
                    }
                    chinaChartOption.visualMap.max = max;
                    // 数据源
                    chinaChartOption.series[0].data = d.data;
                    // 初始化图表
                    let china = echarts.init($('#china')[0]);
                    china.setOption(chinaChartOption);
                    okUtils.echartsResize([china]);
                } else {
                    console.log(d.msg);
                }
            }
        });
    }

    //内容统计
    statText();
    //用户浏览列表
    userList();
    //浏览器统计
    browser();
    //访问量
    pageview();
    //用户分布
    userLocation();
});


